<template>
  <div class="itemCard" :style="`width:${getWidth}`">
    <div class="cardTitle">{{ title }}</div>
    <div class="cardInfoBox">
      <div class="numBox">
        <span class="numStyle"> {{ num }} </span>
        <span class="unitStyle"> ({{ unit }}) </span>
      </div>
      <img class="icon" v-if="iconType === 'img'" :src="url" alt="" />
      <svg-icon v-else :icon-class="url" class="icon" />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  getWidth: {
    // 每一项的宽度
    type: String,
    default: "250px",
    required: true,
  },
  title: {
    type: String,
    default: "xxx",
    required: true,
  },
  num: {
    type: String,
    default: "0",
    required: true,
  },
  unit: {
    type: String,
    default: "元",
    required: true,
  },
  url: {
    type: String,
    default: "",
    required: true,
  },
  iconType: {
    type: String,
    default: "img",
    required: false,
  },
});
</script>

<style lang="scss" scoped>
.itemCard {
  height: 128px;
  background: #ffffff;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 18px 28px;
  .cardTitle {
    font-size: 18px;
    margin-bottom: 26px;
    color: $title-big-color;
  }
  .cardInfoBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .numBox {
      font-size: 36px;
      font-weight: bold;
      color: $title-big-color;
      .unitStyle {
        font-size: 14px;
        font-weight: 400;
        color: #808080;
      }
      .numStyle {
        font-family: "ACaslonPro-Bold";
      }
    }
    .icon {
      width: 40px;
      height: 40px;
    }
  }
}
</style>
